11/25/2016 12:00:00 AM

HtmlHelper in ASP.NET MVC

Introduce: An html helper is a method that is used to render html content in a view.html helper are completed as extension method. “@Html” is a HtmlHelper and “ActionLink” is a one extension method for HtmlHelper. HtmlHelper decrease your coding.

List of HtmlHelper methods and Html content :

HtmlHelper	Html Contant
@Html.ActionLink(“Index”,”Index”,”Home”)	<a href=”Home/Index”>Index</a>
@Html.Label	<label for=”Username”>Username</label>
@Html.TextBox(“Username”)	<Index type=”text” name=”Username” id=”Username” value=””/>
@Html.Password(“Password”)	<input type=”Password” name=”Password” id=”Password”>
@Html.RadioButton(“Gender”,”Male”)	<input type=”radio” value=”Male” name=”Gender” id=”Gender”/>
@Html.DropDownList(“profession”,new SelectList(ViewBag.profession, “value”,”text”))	<select name=”profession” id=”profession”> <option value=”student”>student</option> <option value=”Employed”> Employed</option> </select>
@Html.TextArea(“message”)	<textarea name=”message” id=”message”></textarea>
@Html.CheckBox(“IAgree”)	<input type=”checkbox” name=”IAgree” id=”IAgree/>”
@Html.Hidden(“UserId”)	<Input type=”hidden” name=”UserId” id=”UserId” value=””>

create view using html helpers :

Step : 1

Open Visual studio
Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
Create new controller “controller name like as HtmlHelper”

Add view “view name like as Index”

Step : 2

Example :1 write simple Html code for inputbox.

  <Index type=”text” name=”Username” id=”Username” value=””/>

write code use htmlhelper for inputbox.

 @Html.TextBox(“Username”)

run this project you see same inputbox, Why are the benefits of HtmlHelpe? HtmlHelpe has a lot of advantages, one of them reduces your coding.

Example :2 Now create a RegisterForm use htmlhelper.

step:1

Index.cshtml

<br /><br /><br />
@using(Html.BeginForm())
{
    <form>
        <ul>
            <li>
                @Html.Label("UserId")
                @Html.Hidden("UserId")
            </li>
            <li>
                @Html.Label("Username")
                @Html.TextBox("Username")
            </li>
            <li>
                @Html.Label("Passowrd")
                @Html.Password("Password")
            </li>
            <li>
                @Html.Label("Gender")
                @Html.RadioButton("Gender","Male") Male
                @Html.RadioButton("Gender", "Female") Female
            </li>
            <li>
                @Html.Label("Profession")
                @Html.DropDownList("Profession",new SelectList(ViewBag.Profession,"Text","Value"))
            </li>
            <li>
                @Html.Label("I Agree")
                @Html.CheckBox("IAgree")
            </li>
            <li>
                @Html.Label("About yourself")
                @Html.TextArea("AboutYourSelf")
            </li>
        </ul>
        <button>Submit</button>
    </form>
}

step:2 Write this code in your Controller for DropDownList [if you don't understand it,you can see the video].

HtmlHelperController.cs

public ActionResult Index()
        {
            List<SelectListItem> Item = new List<SelectListItem>();
            Item.Add(new SelectListItem { Text = "Student", Value = "Student", Selected = false });
            Item.Add(new SelectListItem { Text = "Employee", Value = "Employee", Selected = false });
            ViewBag.Profession = Item;
            return View();
        }

Now run the project.